import React, { useState } from 'react';
import JoditEditor from 'jodit-react';
import { Card, Typography, Button } from 'antd';

const { Title, Paragraph } = Typography;

const JoditPage: React.FC = () => {
  const [content, setContent] = useState('<p>这是 Jodit 编辑器的初始内容。</p>');

  const config = {
    readonly: false,
    placeholder: '请输入内容...',
    height: 400,
    language: 'zh_cn',
    toolbarSticky: false,
    showCharsCounter: true,
    showWordsCounter: true,
    showXPathInStatusbar: false,
    askBeforePasteHTML: false,
    askBeforePasteFromWord: false,
    defaultActionOnPaste: 'insert_as_html',
    buttons: [
      'source', '|',
      'bold', 'italic', 'underline', 'strikethrough', '|',
      'superscript', 'subscript', '|',
      'ul', 'ol', '|',
      'outdent', 'indent', '|',
      'font', 'fontsize', 'brush', 'paragraph', '|',
      'image', 'video', 'table', 'link', '|',
      'align', 'undo', 'redo', '|',
      'hr', 'eraser', 'copyformat', '|',
      'symbol', 'fullsize', 'print', 'about'
    ]
  };

  const handleGetContent = () => {
    console.log(content);
  };

  return (
    <div style={{ padding: '24px' }}>
      <Card>
        <Title level={2}>Jodit 富文本编辑器</Title>
        <Paragraph>
          Jodit 是一个功能丰富的所见即所得富文本编辑器，支持多种语言和自定义配置。
        </Paragraph>
        
        <div style={{ marginTop: '20px' }}>
          <JoditEditor
            value={content}
            config={config}
            onBlur={newContent => setContent(newContent)}
            onChange={newContent => {}}
          />
        </div>
        
        <div style={{ marginTop: '20px' }}>
          <Button onClick={handleGetContent}>获取内容</Button>
        </div>
      </Card>
    </div>
  );
};

export default JoditPage;